import React, { useState, useEffect } from 'react';
import { StyleSheet, View, ScrollView, Alert } from 'react-native';
import { Button, ProgressBar } from 'react-native-paper';
import { router } from 'expo-router';
import { useAuth } from '@/contexts/AuthContext';
import { ThemedView } from '@/components/ThemedView';
import { ThemedText } from '@/components/ThemedText';
import { Colors } from '@/constants/Colors';
import { useColorScheme } from '@/hooks/useColorScheme';

// 引导步骤
const STEPS = [
  { id: 'basic', title: '基本信息', route: '/profile-setup/basic-info' },
  { id: 'appearance', title: '外表特征', route: '/profile-setup/appearance' },
  { id: 'lifestyle', title: '生活方式', route: '/profile-setup/lifestyle' },
  { id: 'interests', title: '兴趣爱好', route: '/profile-setup/interests' },
  { id: 'values', title: '价值观', route: '/profile-setup/values' },
  { id: 'preferences', title: '匹配偏好', route: '/profile-setup/preferences' },
];

export default function ProfileSetupScreen() {
  const colorScheme = useColorScheme();
  const { userInfo, userToken } = useAuth();
  const [currentStep, setCurrentStep] = useState(0);
  const tintColor = Colors[colorScheme ?? 'light'].tint;

  // 如果用户未登录，重定向到登录页面
  useEffect(() => {
    if (!userToken) {
      router.replace('/auth/login');
    }
  }, [userToken]);

  // 处理开始设置
  const handleStartSetup = () => {
    router.push('/profile-setup/basic-info' as any);
  };

  // 处理跳过设置
  const handleSkipSetup = () => {
    Alert.alert(
      '确定要跳过个人资料设置吗？',
      '完善个人资料可以帮助我们为您推荐更合适的匹配对象。',
      [
        { text: '取消', style: 'cancel' },
        { 
          text: '确定跳过', 
          onPress: () => {
            // 跳转到主页
            router.replace('/(tabs)');
          } 
        }
      ]
    );
  };

  return (
    <ThemedView style={styles.container}>
      <ScrollView contentContainerStyle={styles.scrollContent}>
        <View style={styles.header}>
          <ThemedText style={styles.title}>完善您的个人资料</ThemedText>
          <ThemedText style={styles.subtitle}>
            帮助我们了解您，为您推荐更合适的匹配对象
          </ThemedText>
        </View>

        <ProgressBar 
          progress={0} 
          color={tintColor} 
          style={styles.progressBar} 
        />

        <View style={styles.stepsContainer}>
          {STEPS.map((step, index) => (
            <View key={step.id} style={styles.stepItem}>
              <View style={[
                styles.stepNumber, 
                { backgroundColor: index === currentStep ? tintColor : '#e0e0e0' }
              ]}>
                <ThemedText style={styles.stepNumberText}>{index + 1}</ThemedText>
              </View>
              <ThemedText style={styles.stepTitle}>{step.title}</ThemedText>
            </View>
          ))}
        </View>

        <View style={styles.imageContainer}>
          {/* 这里可以放置一个引导图片 */}
        </View>

        <View style={styles.buttonContainer}>
          <Button
            mode="contained"
            onPress={handleStartSetup}
            style={styles.button}
            labelStyle={styles.buttonText}
            theme={{ roundness: 10 }}
          >
            开始设置
          </Button>

          <Button
            mode="outlined"
            onPress={handleSkipSetup}
            style={[styles.button, styles.skipButton]}
            labelStyle={styles.skipButtonText}
            theme={{ roundness: 10 }}
          >
            稍后设置
          </Button>
        </View>
      </ScrollView>
    </ThemedView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  scrollContent: {
    flexGrow: 1,
    padding: 20,
  },
  header: {
    marginTop: 40,
    marginBottom: 30,
    alignItems: 'center',
  },
  title: {
    fontSize: 24,
    fontWeight: 'bold',
    marginBottom: 10,
    textAlign: 'center',
  },
  subtitle: {
    fontSize: 16,
    textAlign: 'center',
    opacity: 0.7,
  },
  progressBar: {
    height: 8,
    borderRadius: 4,
    marginBottom: 30,
  },
  stepsContainer: {
    marginBottom: 30,
  },
  stepItem: {
    flexDirection: 'row',
    alignItems: 'center',
    marginBottom: 15,
  },
  stepNumber: {
    width: 30,
    height: 30,
    borderRadius: 15,
    justifyContent: 'center',
    alignItems: 'center',
    marginRight: 15,
  },
  stepNumberText: {
    color: 'white',
    fontWeight: 'bold',
  },
  stepTitle: {
    fontSize: 16,
  },
  imageContainer: {
    height: 200,
    justifyContent: 'center',
    alignItems: 'center',
    marginBottom: 30,
  },
  buttonContainer: {
    marginTop: 'auto',
  },
  button: {
    marginBottom: 15,
    paddingVertical: 8,
  },
  buttonText: {
    fontSize: 16,
    fontWeight: 'bold',
  },
  skipButton: {
    borderColor: '#ccc',
  },
  skipButtonText: {
    fontSize: 16,
  },
});
